<template>
    <div class="page-box">
        <div class="login-bg-box"></div>
        <div class="logo-img-item">
            <el-image  :src="logo_img"></el-image>
        </div>
    </div>
    <teleport to="body">
        <div class="login-content">
            <div class="sys-title-box">
                物料管理系统
            </div>
            <div class="login-content-box">
                <div class="content-bg-box"></div>
                <el-form 
                    style="width:100%;"
                    ref="loginRef"
                    :model="form"
                    :rules="rules"                    
                >
                    <el-form-item prop="account">
                        <el-input v-model="form.account" 
                            placeholder="请输入账号" 
                            :prefix-icon="UserFilled"  
                            @keyup.enter="loginFn"></el-input>
                    </el-form-item>
                    <el-form-item prop="psd">
                        <el-input type="password" 
                            v-model="form.psd" 
                            placeholder="请输入密码" 
                            :prefix-icon="Lock"
                            @keyup.enter="loginFn"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" :loading="form.isLoading" style="width:100%;" @click="loginFn">
                            <span v-show="!form.isLoading">登录</span>    
                            <span v-show="form.isLoading">登录中</span>    
                        </el-button>                                  
                     </el-form-item>
                </el-form>
            </div>
         </div>
    </teleport>
</template>
<script>

import { reactive, ref } from "vue"
import { useRouter } from 'vue-router';
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import axios from "axios";

export default {
    name: 'login',
    setup(){
        const router = useRouter()
        let form = reactive({
            account: '',
            psd: '',
            isLoading: false
        })
        const rules = reactive({
            account: [
                {
                    required: true,
                    message: '请输入账号！',
                    trigger: 'change',
                }
            ],
            psd: [
                {
                    required: true,
                    message: '请输入密码！',
                    trigger: 'change',
                }
            ]
        })
        let logo_img = ref(
            require("@/assets/loginImg.png")
        )
        let loginRef = ref(null)

        function loginFn(){
            form.isLoading = true
            loginRef.value.validate((valid) => {
                if (valid) {
                    form.isLoading = true
                    login()
                } else {                    
                    form.isLoading = false
                    return false
                }
            })    
            
        }
        async function login(){            
            // let res =  await axios.get('/user')
            let res = await axios.post('/user/login', {
                account: form.account,
                password: form.psd
            })
            let  {data, status} = res
            if(data.success){   
                ElNotification.success({                                 
                    title: '登录成功',
                    type: 'success',
                    message: data.msg,
                    duration: 2000,
                    offset: 100
                })             
                localStorage.setItem('ACCESS_TOKEN', data.result)
                localStorage.setItem('ACCOUNt', form.account)
                router.push('/home/index')
            }
            else{
                ElNotification({
                    title: '登录失败',
                    type: 'error',
                    message: data.msg,
                    duration: 2000,
                    offset: 100
                })  
            }            
            form.isLoading = false            
        }
        return {
            form,
            rules,
            loginRef,            
            logo_img,
            loginFn,
            UserFilled,
            Lock
        }
    }
}
</script>
<style lang="scss" scoped>
    .page-box{
        width: 100%;
        height: 100%;
        padding: 0;
        background: #00457F;
        border-radius: 0;
        .login-bg-box{
            width: 100%;
            height: 100%;
            background: url('~@/assets/loginBg.png') no-repeat;
            background-size: 100% 100% ;
            padding: 0;            
        }
    }
    .logo-img-item{
        position: absolute;
        top: 30px;
        left: 10px;
        width: 240px;
    }
    .login-content{
        position: absolute;
        right: 20%;
        bottom: 50%;
        // transform: translateX(150px);
        transform: translateY(200px);
        .sys-title-box{
            color: #fff;
            font-size: 30px;
            font-weight: 600;
            text-align: center;
            padding: 20px;
        }
        .login-content-box{        
            width: 300px;
            height: 360px;
            background: #fff;
            border-radius: 10px;  
            padding: 20px;      
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            .content-bg-box{
                position: absolute;
                width: 100%;
                height: 100%;
                background: url('~@/assets/bg.jpg') no-repeat;
                background-size: 100% 100% ;
                opacity: 0.2;
            }
        }
    }
    
</style>
